<template>
  <div class="">
    <div class="top">
      <div style="display: flex;line-height: 35px">
        <div class="label">标题:</div>
        <el-input v-model="form.title" size="small"
                  placeholder="请输入标题"></el-input>
        <el-button type="primary" size="small" @click="search">查询</el-button>
        <el-button type="info" size="small"
                   plain @click="form={}">重置</el-button>
      </div>
      <div style="display: flex;width: 100%;flex-direction: row-reverse;line-height:39px;margin-right: 30px;">
        <el-button type="danger"
                   size="small" style="margin-right: 3px"
                   @click="goDeleteSelect()">批量删除</el-button>
        <el-button type="primary"
                   size="small" style="margin-right: 20px"
                   @click="goEdit({},'add')"><i class="el-icon-plus"></i>新增</el-button>

      </div>
    </div>
    <div class="table">
      <el-table :data="tableData"
                :height="'calc(100% - 105px)'"
                :header-cell-style="{background:'#F8F9FA'}"
                @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column prop="date"
                         width="80"
                         label="序号">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
<!--        <el-table-column prop="colName"
                         label="栏目名称"> </el-table-column>-->
        <el-table-column prop="categoryName"
                         label="类别"> 
                  <template slot-scope="scope" style="font-size: 14px">
                      {{ null===scope.row.categoryName?scope.row.colName:scope.row.categoryName }}
                  </template>              
        </el-table-column>
        <el-table-column prop="title"
                         width="280"
                         label="标题"> </el-table-column>
        <el-table-column prop="createdTime"
                         width="220"
                         label="创建时间"> </el-table-column>
        <el-table-column label="状态"
                         width="100"
                         prop="state">
          <template slot-scope="scope" style="font-size: 14px">
<!--    状态0-重拟稿1-待审核2-审核通过3-审核不通过    4-审查不通过5-归档     -->
            <el-tag type="primary" class="noBack"
                    size="" v-if="0===scope.row.state">重拟稿</el-tag>
            <el-tag type="primary" class="noBack"
                    size="" v-else-if="1===scope.row.state||2===scope.row.state">待审核</el-tag>
            <el-tag type="success" class="noBack"
                    size="" v-else-if="3===scope.row.state">通过</el-tag>
            <el-tag type="danger" class="noBack"
                       size="" v-else-if="4===scope.row.state">不通过</el-tag>
            <el-tag type="danger" class="noBack"
                    size="" v-else-if="5===scope.row.state">归档</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         prop="caozuo"
                         width="200"
                          align="left">
          <template slot-scope="scope">
            <el-button  type="text"
                        style="color: #1891FF;margin-left: -5px"
                       @click="goEdit(scope.row,'see')">查看</el-button>
            <el-button type="text"
                       style="color: #1891FF;" v-if="1 === scope.row.state || 3 === scope.row.state"
                       @click="back(scope.row)">撤销</el-button>
            <el-button type="text"
                       style="color: #1891FF;" v-else-if="0 === scope.row.state || 4 === scope.row.state"
                       @click="goEdit(scope.row,'edit')">编辑</el-button>
            <el-button  type="text"
                        style="color: #F31C11"
                       @click="goDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          class="page"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.current"
          :page-sizes="[10, 50, 100, 200]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total">
      </el-pagination>
    </div>
    <el-drawer
        size="800px"
        :title="titleT"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose">
      <hr class="myHr"/>
      <edit-draw @closeTab="closeTab" :editType="editType" :data-type="dataType" :dataUp="dataUp" ref="editDraw"></edit-draw>
    </el-drawer>
  </div>
</template>

<script>
import editDraw from '../components/editDraw'
export default {
  name: '',
  components: {
    editDraw
  },
  props: {
    titleT: {
      type: String,
      default: "新增"
    },
  },
  data() {
    return {
      editType:'',
      dataType:'',
      formDate:{},
      form:{},
      drawer: false,
      direction: 'rtl',
      dataUp:{},
      pageInfo:{
        page:0,
        pageSize:10,
        total:0,
        current:1,
        portalSelect:'1'
      },
      tableData: [],
      parentNode: {},
      dialogVisible: false,
      selected:[],
    }
  },
  mounted() {
    this.init()
    this.getTable()
  },
  methods: {
    closeTab(){
      this.drawer=false
      this.getTable()
    },
    init(){
      /*this.drawer=true
      console.log(88888)
      this.dataUp={portalSelect:[]}
      this.dataUp={}
      this.drawer=false*/
    },
    back(row){
      console.log(row)
      this.$api.quash({id:row.id}).then(res=>{
        if(200===res.code){
          this.$message.success('撤回成功！')
          this.getTable()
        }else{
          this.$message.error(res.message)
        }
      }).catch()
    },
    handleSizeChange(e){
      //console.log(e)
      this.pageInfo.pageSize=e
      this.getTable()
    },
    handleCurrentChange(e){
      //console.log(e)
      this.pageInfo.page=e-1
      this.getTable()
    },
    search(){
      this.pageInfo.page=0
      this.getTable()
    },

    getTable(){
      let par=JSON.parse(JSON.stringify(this.pageInfo))
      let c=this.form
      par=Object.assign(par,c)
      this.$api.contentPaginQuery(par).then(res=>{
        this.tableData=res.data.data
        this.pageInfo.total=res.data.recordsTotal
      }).catch()
    },
    handleClose(done) {
      done();
      /*this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});*/
    },
    handleSelectionChange(e){
      this.selected=e
    },
    goSee(row) {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.leftForm.type = 'see'
      })
    },
    goEdit(row,type) {
      this.editType=type
      console.log(row)
      if('see'===type){
        this.titleT='查看'
      }else if('edit'===type){
        this.titleT='编辑'
      }else if('add'===type){
        this.titleT='新增'
      }
      if(undefined===row.id){
        console.log(this.formDate)
        if('0'==this.formDate.id){
          this.$message.error('模块架构禁止新增资讯内容！')
          return
        }
        if(undefined===this.formDate.id){
          this.$message.error('请先选择项！')
          return
        }else{
          console.log(this.selected)
          if('1'===this.formDate.isThirdNode){
            this.dataUp={
              col:this.formDate.parentId,
              colName:this.formDate.parentCol,
              portalSelect_:[],
              isThirdNode:true,
              category:this.formDate.id,
            }
          }else{
            this.dataType=this.formDate
            this.dataUp={
              col:this.formDate.id,
              colName:this.formDate.colName,
              portalSelect_:[],
            }
          }

          this.drawer=true
          try{
            this.$refs.editDraw.init()
          }catch (e) {

          }
        }
      }else{
        //this.titleT='编辑'
        console.log(row)
        let c=row
        if(null!==row.tag&&''!==row.tag){
          c.tag_=row.tag.split(',')
        }else{
          c.tag_=[]
        }
        if(null!==row.portalSelect&&''!==row.portalSelect){
          c.portalSelect_=c.portalSelect.split(',')
        }else{
          c.portalSelect_=[]
        }
        //this.$refs.editDraw.timeL=[row.startTime,row.endTime]
        this.dataUp=c
        this.drawer=true
        try{
          this.$refs.editDraw.init()
        }catch (e) {

        }

      }
      /*this.dataUp=row
      this.dataUp.tag_=row.tag.split(',')*/

      /*this.$refs.editDraw.formInline=row
      this.$refs.editDraw.formInline.tag_=row.tag.split(',')
      this.$refs.editDraw.formInline.time=[row.startTime,row.endTime]*/
      //this.$refs.editDraw.formInline.tag_=row.tag.split(',')
      //this.$refs.editDraw.formInline.time=[row.startTime,row.endTime]
      //this.$parent.dialogVisible = true
    },
    goDeleteSelect(row) {
      if(0===this.selected.length){
        this.$message.error('请先选择删除项!')
        return;
      }
      //return
      this.$confirm('此操作将删除所选内容, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
      })
          .then(() => {
            let params = { id: this.selected.map(x=>x.id) }
            this.$api.contentDeleteBatch(params).then((res) => {
              this.$message({
                type: 'success',
                message: '批量删除成功!',
              })
              this.getTable()
            })
          })
          .catch(() => {})
    },
    goDelete(row) {
      this.$confirm('此操作将删本条内容, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
      })
        .then(() => {
          let params = { id: row.id }
          this.$api.contentDelete(params).then((res) => {
            this.$message({
              type: 'success',
              message: '删除成功!',
            })
            this.getTable()
          })
        })
        .catch(() => {})
    },
  },
}
</script>

<style scoped lang="less">
.top {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .el-input {
    width: 200px;
    margin-right: 10px;
  }
  .label {
    width: 40px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
  }
}
.table {
  height: 100%;
  width: calc(70vw - 10px);
}
.noBack{
  //background: transparent;
  border: none;
}
.page{
  margin-right: 20px;
  display: flex;
  margin-top: 10px;
  flex-direction: row-reverse
}
/deep/ .bt{

}
/deep/.el-button--primary.is-plain:focus, .el-button--primary.is-plain:hover {
  background: transparent!important;
  border-color: transparent!important;
  color: lightblue;
}
/deep/.el-button--danger.is-plain:focus, .el-button--danger.is-plain:hover {
  background: transparent!important;
  border-color: transparent!important;
  color: pink;
}
.myHr{
  border: 0;
  height: 1px;
  background: #eee;
}
/deep/ .el-drawer__header {
  align-items: center!important;
  color: #72767b!important;
  display: flex!important;
  margin-bottom: 10px!important;
  padding: 10px 20px 0!important;
}

/deep/ .btn {
  margin-left: -22px!important;
}
/deep/ .margin10 {
  margin-left: -11px!important;
}
/deep/  .el-tag {
  margin-left: -13px!important;
  font-size: 14px;
}
/deep/ .el-drawer__header {
  font-size: 14px!important;
}
</style>
